<template>
  <div class="WsyjNavWeather">
    <!-- <div>这里是天气小组件</div> -->
    <span>
      {{city}}
      <span class="yellow">{{ weather.curTemp }}℃</span>
      &nbsp;&nbsp;{{ weather.curWeather }}&nbsp;&nbsp;
      <span class="yellow">{{ weather.windType }}&nbsp;{{ weather.windLevel }}</span>
      <span>&nbsp;&nbsp;空气&nbsp;·&nbsp;{{ weather.quality }}</span>
    </span>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {weatherServer} from '@/api/installServer.ts';
import publishObjectPath from '@/util/configRegistry';
const weatherCfg = publishObjectPath.value.weather;

@Component
export default class WsyjNavWeather extends Vue {
  private city: string = weatherCfg.city;
  private intervals: any = null;
  private weather = {
    curTemp: '-',
    curWeather: '-',
    windType: '北风',
    windLevel: '3级',
    quality: '-',
  };
  public mounted() {
    const self = this;
    this.getWeather();
    this.intervals = setInterval(() => {
      self.getWeather();
    }, 1000 * 60 * 60);
  }
  public getWeather() {
    const self = this;
    weatherServer.getWeatherData().then((weatherData: any) => {
      const tempWeather = weatherData.data.data;
      const otherInfo = tempWeather.forecast[0];
      self.weather.curTemp = tempWeather.wendu;
      self.weather.windType = otherInfo.fx;
      self.weather.windLevel = otherInfo.fl;
      self.weather.curWeather = otherInfo.type;
      self.weather.quality = tempWeather.quality;
    });
  }
  public beforeDestroy() {
    clearInterval(this.intervals);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.WsyjNavWeather{
  // margin-left:200px;
  // margin-top:20px;
  // height: 60px;
  color: #fff;
  span {
    display: inline-block;
    font-size: 18px;
    line-height: 21px;
  }
  .yellow {
    color: #ffff00;
  }
}
</style>
